<%@page import="java.net.URLDecoder"%>
<%@ page import="org.apache.shiro.subject.Subject" %>
<%@ page import="org.apache.shiro.SecurityUtils" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="${ctxPath}/static/css/mask.css">
	<link rel="stylesheet" href="${ctxPath}/static/css/style.css">
	<link rel = "Shortcut Icon" href="${ctxPath}/static/images/login.jpg">
	<title>Welcome to OA-System</title>
<body >
<section>
	<!-- 背景颜色 -->
	<div class="color"></div>
	<div class="color"></div>
	<div class="color"></div>
	<div class="box">
		<!-- 背景圆 -->
		<div class="circle" style="--x:0"></div>
		<div class="circle" style="--x:1"></div>
		<div class="circle" style="--x:2"></div>
		<div class="circle" style="--x:3"></div>
		<div class="circle" style="--x:4"></div>
		<!-- 登录框 -->
		<div class="container">
			<div class="form">
				<h2>登录</h2>
				<form action="${ctxPath}/Login" method="post" name="form">
					<div class="inputBox">
						<input type="text" placeholder="用户名" id="username" name="username" autocomplete="off"/>

					</div>
					<div class="inputBox">
						<input type="password" placeholder="密码" id="password" name="password" />

					</div>
					<div class="inputBox">
						<input type="button" value="登录" onclick="goLogin();"/>
					</div>
					<p class="forget">忘记密码?<a href="//www.google.cn/">
						点击这里
					</a></p>
					<p class="forget">注册新账户?<a href="//www.baidu.com/">
						注册
					</a></p>
				</form>
			</div>
		</div>
	</div>

	<div class="mask">
		<div class="mask-box">
			<div class="head">
				提示
			</div>
			<p class="tips">${msg[ param['errcode'] ]}</p>
			<button class="isConfirm" >确定</button>
		</div>
	</div>
</section>
</body>
</html>


<script src="${ctxPath}/static/js/jquery-1.11.1.min.js"></script>
<script src="${ctxPath}/static/js/md5.js"></script>

<%
	Map<String,String> _msg = new HashMap<String,String>();
	_msg.put("0", "账号或密码不能为空！");
	_msg.put("1", "此用户不存在！");
	_msg.put("2", "账号或密码错误,请点击重试！");
	_msg.put("3", "当前用户已锁定");
	_msg.put("4", " 请先登录！");
	//{ps} 设置到请求域 ...
	request.setAttribute( "msg", _msg );
%>

<%
	Subject subject = SecurityUtils.getSubject();
	pageContext.setAttribute("user",subject.getPrincipal());
%>
<script>
	function goLogin(){
		<!--给账号密码文本框进行判空-->
		if(form.username.value=="" || form.password.value=="") {
			$(".tips").html("账号或密码不能为空!")
			$(".mask").css('display','block')
		}else {
		var _username = $("#username").val();
		var _password = $("#password").val()
	
		var hexMd5Password = hex_md5(_password);
		console.log(hexMd5Password);
		var token = "username="+ _username + "&password="+ hexMd5Password;
		window.location = "${ctxPath}/User/login?"+ token;
	   }
	}

	document.body.onkeydown = function(event){
		if(event.keyCode == 13 && $(".mask").css('display') == 'block'){
			$(".mask").css('display','none')
		}
		else if (event.keyCode == 13){
			goLogin()
		};
	}

	$(".isConfirm").on('click',function () {
		$(".mask").css('display','none')
	});
	$(".isConfirm").on('keydown',function (event) {
		if(event.keyCode == 13){
			$(".mask").css('display','none')
		};
	});

	<!-- 提示: Eclipse 在这里报错不一定是有问题。 -->
	<c:if test="${not empty param['errcode']}">
	$(".tips").html("${msg[ param['errcode'] ]}")
	$(".mask").css('display','block')
	</c:if>
</script>